<template>
	<div>
		<Logo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />

		<el-scrollbar>
			<el-menu
				:default-active="defaultActive"
				unique-opened
				@open="handleOpen"
				@close="handleClose"
			>
				<el-menu-item index="1" @click="jumpToPath('/home')">
					<el-icon><House /></el-icon>
					<span>仪表盘</span>
				</el-menu-item>
				<el-menu-item index="2" @click="jumpToPath('/product-database')">
					<el-icon><PieChart /></el-icon>
					<span>产品数据库</span>
				</el-menu-item>
				<el-sub-menu index="3">
					<template #title>
						<el-icon><Aim /></el-icon>
						<span>销售跟踪</span>
					</template>
					<el-menu-item index="3-1" default-active="3-1">
						<span @click="jumpToPath('/product/sales-tracker')"
							>我的跟踪</span
						>
					</el-menu-item>
				</el-sub-menu>

				<el-sub-menu index="4">
					<template #title>
						<el-icon><SuitcaseLine /></el-icon>
						<span>投资组合</span>
					</template>
					<el-menu-item index="4-1" default-active="4-1">
						<span @click="jumpToPath('/portfolio')">My Portfolio</span>
					</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts">
import { useSettingsStore, useAppStore, useUserStore } from "@/store";
const settingsStore = useSettingsStore();
const appStore = useAppStore();
const userStore = useUserStore();
const sidebarLogo = computed(() => settingsStore.sidebarLogo);
const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
const router = useRouter();
const defaultActive = computed(() => userStore.menuDefaultActive);

// 菜单操作
const handleOpen = (key: string, keyPath: string[]) => {
	userStore.changeMenuDefaultActive(key);
	if (key == "3") {
		userStore.changeMenuDefaultActive("3-1");
		router.push("/product/sales-tracker");
	}
	if (key == "4") {
		userStore.changeMenuDefaultActive("4-1");
		router.push("/portfolio");
	}
};
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath);
};

const jumpToPath = (path: string) => {
	router.push(path);
};
</script>

<style lang="scss" scoped>
.el-menu {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background-color: $left-menu-background;
}
.el-menu-item {
	width: 240px;
	height: 40px;
	border-radius: 10px;
}
.el-menu-item:hover {
	background-color: $left-menu-hover;
}
.el-sub-menu__title:hover {
	border-radius: 10px;
}
.el-menu-item.is-active {
	background-color: #fff;
	box-shadow: inset 0 -1px 2px 0 rgba(242, 243, 248, 0.48),
		0 0 0 1px rgba(197, 204, 227, 0.45), 0 4px 4px 0 rgba(21, 30, 58, 0.04);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
}
</style>
